<template>
  <Card
    :tab-list="tabListTitle"
    v-bind="$attrs"
    :active-tab-key="activeKey"
    @tab-change="onTabChange"
  >
    <div>
      <Textarea
        v-if="activeKey === '0'"
        v-model:value="formattedLinks"
        :placeholder="t('sys.configuration.inputViecottext')"
        :rows="10"
      />
      <BasicTable v-if="activeKey === '1'" @register="registerTableUrl">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <TableAction
              :actions="[
                {
                  label: t('sys.script.details'),
                  tooltip: t('sys.script.details'),
                  onClick: handleView.bind(null, record),
                },
              ]"
            />
          </template>
        </template>
      </BasicTable>
      <AccountModal @register="register" @success="DetailViewSuccess"> </AccountModal>
    </div>
  </Card>
</template>

<script lang="ts" setup>
  import { ref, computed } from 'vue';
  import { useModal } from '@/components/Modal';
  import AccountModal from './AccountModal.vue';
  import { Card, Textarea } from 'ant-design-vue';
  import { BasicTable, useTable, TableAction } from '@/components/Table';
  import { columnsModelstab } from './account.data';
  import { getTasklistAPI } from '@/api/demo/InformationMatching';
  import { useI18n } from "@/hooks/web/useI18n";

  const { t } = useI18n();
  const emit = defineEmits(['update:formattedLinks']);
  // const modalTitle = computed(() => {
  //   if (formattedLinks.value.length == 0) {
  //     return `请勾选视频`;
  //   } else {
  //     return `您勾选了视频匹配度 大于${matching.value}的 共 ${formattedLinks.value.length} 条`;
  //   }
  // });

  const activeKey = ref('0');
  const tabListTitle = [
    { key: '0', tab: '手动录入' },
    { key: '1', tab: '筛选' },
  ];
  const [register, { openModal: openDetailView }] = useModal();
  const [registerTableUrl] = useTable({
    // title: modalTitle,
    api: async (params) => {
      const result = (await getTasklistAPI(params)) as { items: any[]; total: number };
      total.value = result.total;
      return result;
    },

    rowKey: 'id',
    columns: columnsModelstab,
    actionColumn: {
      width: 80,
      title: t('sys.configuration.action'),
      dataIndex: 'action',
    },
    scroll: { y: 300 }, // 设置表格的最小高度为 300px
  });

  const total = ref(0);
  const links = ref<string[]>([]);
  const formattedLinks = computed({
    get() {
      return links.value.join(',\n'); // 将数组转换为带逗号和换行符的字符串
    },
    set(value) {
      links.value = value.split(',\n'); // 将带逗号和换行符的字符串转换为数组
    },
  });

  function handleView(record: Recordable) {
    openDetailView(true, {
      record,
    });
  }

  function onTabChange(key: string) {
    activeKey.value = key;
  }

  function DetailViewSuccess(record: Recordable) {
    links.value = record.urls;
  }

  // 定义一个方法，用于返回 formattedLinks 的值
  function getFormattedLinks() {
    return formattedLinks.value;
  }

  // 暴露方法给父组件
  defineExpose({
    getFormattedLinks,
  });
</script>
